<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    mode: {
      type: String,
      default: "aspectFill",
    },
    width: {
      type: String,
      default: "300px",
    },
    height: {
      type: String,
      default: "225px",
    },
    lazy: {
      type: Boolean,
      default: false,
    },
    alt: {
      type: String,
      default: "",
    },
    // 懒加载需要使用到  传入的是 HTML元素 例如 .list #list |不传自动找最近一个 overflow 值为 auto 或 scroll 的父元素
    scrollContainer: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      imgLoading: true,
    };
  },
  computed: {
    fit() {
      let _fit = "";
      //   不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
      if (this.mode == "scaleToFill") {
        _fit = "fill";
      }
      // 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
      else if (this.mode == "aspectFit") {
        _fit = "contain";
      }
      // 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
      else if (this.mode == "aspectFill") {
        _fit = "cover";
      }
      // 宽度不变，高度自动变化，保持原图宽高比不变
      else if (this.mode == "widthFix") {
        _fit = "";
      }
      // 高度不变，宽度自动变化，保持原图宽高比不变
      else if (this.mode == "heightFix") {
        _fit = "";
      }
      return _fit;
    },
    imageStyle() {
      let s_ = "";

    //   s_ += `width:${this.width};`;
    //   s_ += `height:${this.height};`;
    if (this.mode != "widthFix") {
        s_ += `height:100%;`;
      }
      if (this.mode != "heightFix") {
        s_ += `width:100%;`;
      }
      return s_;
    },
  },
  methods: {
    imgLoad() {
      this.imgLoading = false;
      this.$emit("onLoad", "ok");
    },
    imgError() {
      this.imgLoading = false;
      this.$emit("onError", "no");
    },
    contrast() {},
  },
  mounted() {
    // console.error(this.$parent);
    // console.error("123", this.lazy);
    // console.error("123", this.scrollContainer);
  },
};
</script>
